<template>
	<view class="safety-analysis-page">
		<!-- 顶部导航栏 -->
		<u-navbar :placeholder="true" leftIcon=""></u-navbar>
		<image class="head-bg" src="/static/images/headBg.jpg" alt=""></image>
		
		<view class="page-content">
			<view class="header">
				<view class="header-left">
					<text>安环分析</text>
					<text>数据更新: {{getCurrentDate()}}</text>
				</view>
				<view class="header-right">
					<view class="date-selector" @click="selectDate">
						<text class="date-text">{{showTime}}</text>
						<u-icon name="arrow-down-fill" size="10" color="#666"></u-icon>
					</view>
				</view>
			</view>
			<!-- KPI指标卡片 -->
			<!-- KPI指标卡片 -->
			<view class="kpi-section" style="padding: 30rpx 16rpx 0 16rpx;">
				<view class="bg-box">
					<image class="index-bg" src="@/static/images/indexBg4.png" mode=""></image>
					<view class="kpi-row-head">
						<view class="kpi-card large">
							<view class="kpi-header">
								<!-- <image src="/static/images/yearOne.jpg"></image> -->
								<u-icon name="/static/images/yearOne.png" size="16" color="#1890ff"></u-icon>
								<text class="kpi-title">本年巡检</text>
							</view>
							<text class="kpi-value">{{monthSafetycheckData.thisYearActual}}/{{monthSafetycheckData.thisYearPlan}}</text>
						</view>
			
						<view class="kpi-card large">
							<view class="kpi-header">
								<u-icon name="/static/images/yearTwo.png" size="16" color="#1890ff"></u-icon>
								<text class="kpi-title">本年隐患</text>
							</view>
							<text class="kpi-value">{{monthSafetyhazardData.thisYearRectified}}/{{monthSafetyhazardData.thisYearFound}}</text>
						</view>
			
						<view class="kpi-card large">
							<view class="kpi-header">
								<u-icon name="/static/images/yearTr.png" size="16" color="#1890ff"></u-icon>
								<text class="kpi-title">本年三违</text>
							</view>
							<text class="kpi-value">{{monthSpecialOperation.thisYearCompleted}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="kpi-section" style="padding-top: 0;">
				<view class="kpi-row">
					<view class="kpi-card small">
						<view>
							<text class="kpi-label">本月巡检</text>
							<view style="color: rgba(31, 144, 255, 1);" class="kpi-value">
								<text>{{monthSafetycheckData.thisMonthActual}}/{{monthSafetycheckData.thisMonthPlan}}</text>
								<text>次</text>
							</view>
							<text class="kpi-subtitle">实际/计划</text>
						</view>
						<image src="@/static/images/cardBlue.png"></image>
					</view>
			
					<view class="kpi-card small">
						<view>
							<text class="kpi-label">本月隐患</text>
							<view style="color: rgba(128, 116, 255, 1);" class="kpi-value">
								<text>{{monthSafetyhazardData.thisMonthRectified}}/{{monthSafetyhazardData.thisMonthFound}}</text>
								<text>次</text>
							</view>
							<text class="kpi-subtitle">整改/发现</text>
						</view>
						<image src="@/static/images/cardGrape.png"></image>
					</view>
					<view class="kpi-card small">
						<view>
							<text class="kpi-label">本月特种作业</text>
							<view style="color: rgba(22, 207, 129, 1);" class="kpi-value">
								<text class="kpi-value">{{monthSpecialOperation.thisMonthCompleted}}</text>
								<text>次</text>
							</view>
							<text class="kpi-subtitle">实际</text>
						</view>
						<image src="@/static/images/cardGreen.png"></image>
					</view>
			
					<view class="kpi-card small">
						<view>
							<text class="kpi-label">临期证照</text>
							<view style="color: rgba(255, 145, 23, 1);" class="kpi-value">
								<text class="kpi-value">{{certificatecountObj.historicalCompanyCount}}/{{certificatecountObj.tempDeviceCount}}</text>
								<text>个</text>
							</view>
							<text class="kpi-subtitle">企业/设备</text>
						</view>
						<image src="@/static/images/cardOrange.png"></image>
					</view>
				</view>
			</view>

			<!-- 隐患和三违分析 -->
			<view class="analysis-section">
				<view class="section-title">隐患和三违</view>

				<view class="charts-grid">
					<view class="chart-item">
						<view class="chart-title">本年隐患位置分布</view>
						<view class="chart-container">
								<addressVue :yearMonth = "yearMonth"></addressVue>
						</view>
					</view>

					<view class="chart-item">
						<view class="chart-title">本年隐患来源分布</view>
						<view class="chart-container">
								<organVue :yearMonth = "yearMonth"></organVue>
						</view>
					</view>

					<view class="chart-item">
						<view class="chart-title">本年隐患级别分布</view>
						<view class="chart-container">
								<levalVue :yearMonth = "yearMonth"></levalVue>
						</view>
					</view>

					<view class="chart-item">
						<view class="chart-title">三违类型分布</view>
						<view class="chart-container">
							<typeVue :yearMonth = "yearMonth"></typeVue>
						</view>
					</view>
				</view>
			</view>

			<!-- 隐患列表 -->
			<view class="danger-list-section">

				<view class="table-container">
					<view class="table-header">
						<view class="table-cell">序号</view>
						<view class="table-cell">隐患名称</view>
						<view class="table-cell">隐患状态</view>
						<view class="table-cell">隐患级别</view>
						<view class="table-cell">逾期天数</view>
						<view class="table-cell">当前处理人</view>
					</view>

					<view v-for="(item, index) in dangerList" :key="index" class="table-row">
						<view class="table-cell">{{ item.hazardId }}</view>
						<view class="table-cell">{{ item.source }}</view>
						<view class="table-cell">
							<text class="status-text" :class="item.status === '未整改'?'status-red':''">{{ item.status }}</text>
						</view>
						<view class="table-cell">{{ item.level }}</view>
						<!-- <view class="table-cell">{{ item.overdueDay }}</view> -->
						<view class="table-cell">2</view>
						<view class="table-cell">{{ item.currentHandler }}</view>
					</view>
				</view>
			</view>

			<!-- 环境监测数据 -->
			<view class="environment-section">
				<view class="section-title">环境监测数据</view>

				<view class="chart-container large">
					<!-- <qiun-data-charts type="line" :opts="environmentChartOpts" :chartData="environmentChartData"
						:canvas2d="true" canvasId="environmentChart" /> -->
						<environmentVue :yearMonth = "yearMonth"></environmentVue>
				</view>
			</view>
		</view>
		<u-datetime-picker @cancel="show = false" @confirm="onConfirm" :show="show" v-model="time" mode="year-month"></u-datetime-picker>
	</view>
</template>

<script>
	import {hazarddetails,hazardregionList,safetycheckData,safetyhazardData,specialOperation,certificatecount} from '@/api/ring.js'
	import addressVue from './cnps/address.vue'
	import organVue from './cnps/organ.vue'
	import levalVue from './cnps/leval.vue'
	import typeVue from './cnps/type.vue'
	import environmentVue from './cnps/environment.vue'
	import {formatTimestamp,formatTimestampBack} from '@/utils/common.js'
	export default {
		components:{
			addressVue,
			organVue,
			levalVue,
			typeVue,
			environmentVue
		},
		data() {
			return {
				dangerList: [],
				monthSafetycheckData:{},
				monthSafetyhazardData:{},
				monthSpecialOperation:{},
				certificatecountObj:{},
				show: false,
				time: Number(new Date()),
				showTime:''
			}
		},
		onShow() {
			this.showTime = formatTimestamp(this.time)
			this.initData()
		},
		computed:{
			yearMonth(){
				return formatTimestampBack(this.time)
			}
		},
		methods: {
			initData(){
				hazarddetails(formatTimestampBack(this.time)).then(res=>{
					this.dangerList = res.data;
				})
				// hazardregionList().then(res=>{
				// 	console.log(res);
				// })
				safetycheckData(formatTimestampBack(this.time)).then(res=>{
					// console.log(res);
					this.monthSafetycheckData = res.data
				})
				safetyhazardData(formatTimestampBack(this.time)).then(res=>{
					// console.log(res);
					this.monthSafetyhazardData = res.data;
				})
				specialOperation(formatTimestampBack(this.time)).then(res=>{
					// console.log(res);
					this.monthSpecialOperation = res.data
				})
				certificatecount(formatTimestampBack(this.time)).then(res=>{
					// console.log(res);
					this.certificatecountObj = res.data
				})
			},
			onConfirm(value){
				this.time = value.value
				this.showTime = formatTimestamp(value.value)
				this.initData()
				this.show = false
				
			},
			goBack() {
				uni.navigateBack()
			},
			selectDate() {
				this.show = true;
			},
			getCurrentDate() {
			  const now = new Date();
			  const year = now.getFullYear();
			  const month = (now.getMonth() + 1).toString().padStart(2, '0');
			  const day = now.getDate().toString().padStart(2, '0');
			  
			  return `${year}/${month}/${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('@/static/font/navBar.less');
	.safety-analysis-page {
		// background-color: #f8f9fa;
		background: #edf0f8;
		min-height: 100vh;
		position: relative;
		overflow-y: auto;
		.head-bg {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		// background: linear-gradient(360deg, rgba(237, 240, 248, 0) 0%, #97C7FF 100%, #5F93FF 100%);
	}
	.header{
		display: flex;
		justify-content: space-between;
		padding: 0 24rpx;
		.header-left {
			>text:nth-child(1) {
				font-weight: 600;
				font-size: 36rpx;
				color: #333;
			}
		
			>text:nth-child(2) {
				color: #313D4B;
				font-size: 26rpx;
				margin-left: 5rpx;
			}
		}
		
		.header-right {
			background-color:#C4D4FA;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			align-items: flex-end;
			padding: 0 20rpx;
			height: 60rpx;
			border-radius: 40rpx;
		}
		.update-time {
			font-size: 20rpx;
			color: #666;
		}
		
		.date-selector {
			display: flex;
			align-items: center;
			gap: 8rpx;
		
			.date-text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	

	

	.page-content {
		height: calc(100vh - 88rpx);
		position: absolute;
		width: 100%;
		// padding: 20rpx 30rpx;
	}

	.kpi-section {
		padding:30rpx 24rpx ;
		// margin-bottom: 30rpx;
		
		.bg-box{
			
			// border: 2rpx solid #fff;
			height: 164rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			.index-bg{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
	.kpi-row-head{
		width: 100%;
		padding: 40rpx 0;
		box-sizing: border-box;
		height: 100%;
		display: flex;
		align-items: center;
		position: absolute;
		// background-color: rgba(255, 255, 255, 0.1);
		justify-content: space-around;
		
		.kpi-card{
			height: 100%;
			.kpi-header{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;
				.kpi-title{
					color:rgba(51, 79, 103, 0.85);
					margin-left: 10rpx;
				}
			}
			.kpi-value{
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 600;
				font-size: 36rpx;
				color: rgba(0, 0, 0, 0.9);
			}
		}
	}

	.kpi-row {
		display: flex;
		gap: 15rpx;
		margin-bottom: 20rpx;
		
		.kpi-card {
			height: 152rpx;
			box-sizing: border-box;
			position: relative;
			display: flex;
			align-content: space-around;
			// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			>view:first-child{
				height: 152rpx;
				border-radius: 20rpx;
				padding: 24rpx 0 24rpx 10rpx;
				position: absolute;
				z-index: 2;
				width: 100%;
				// padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-content: space-around;
				flex-wrap: wrap;
			}
			>image{
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			
			
			&.large {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: left;
			}
			&.small {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				text-align: left;
			}
		}
		&:last-child {
			margin-bottom: 0;
		}
		
		.kpi-header {
			display: flex;
			align-items: center;
			gap: 10rpx;
			// margin-bottom: 16rpx;
		}
		
		.kpi-title {
			font-size: 22rpx;
			color: rgba(0, 0, 0, 0.85);
			font-weight: 500;
			width: 100%;
			
		}
		
		.kpi-value {
			font-size: 30rpx;
			font-weight: 600;
			width: 100%;
			margin-top: 10rpx;
			// margin-bottom: 8rpx;
			>text:nth-child(2){
				font-size: 18rpx;
				font-weight: 400;
			}
		}
		
		.kpi-label {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 4rpx;
			width: 100%;
		}
		
		.kpi-subtitle {
			font-size: 18rpx;
			width: 100%;
			color: rgba(0, 0, 0, 0.6);
		}
	}

	

	

	.analysis-section {
		padding:0 24rpx ;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}

	.charts-grid {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10rpx;
		
	}

	.chart-item {
		width:calc(50% - 10rpx);
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 0;
		// height: 400rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.chart-title {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		text-align: center;
	}

	.chart-container {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 10rpx;
		// height: 200rpx;
		// margin-bottom: 16rpx;

		&.large {
			// height: 400rpx;
		}
	}


	.danger-list-section {
		padding:0 24rpx ;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		
	}

	.table-container {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.table-header {
		display: flex;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		padding: 16rpx 12rpx;
		border-bottom: 1rpx solid #eee;
		.table-cell {
			flex: 1;
			font-size: 22rpx;
			color: #999 ;
			text-align: center !important;
			display: flex;
			align-items: center;
			// justify-content: center;
		}
		
	}

	.table-row {
		display: flex;
		padding: 16rpx 12rpx;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}
	}

	.table-cell {
		flex: 1;
		font-size: 22rpx;
		color: #333;
		text-align: center !important;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.status-text {
		// padding: 4rpx 8rpx;
		// border-radius: 4rpx;
		// font-size: 20rpx;

		&.status-red {
			color: #f5222d;
			// background-color: #fff2f0;
		}

		&.status-blue {
			color: #1890ff;
			// background-color: #f0f9ff;
		}

		&.status-green {
			color: #52c41a;
			// background-color: #f6ffed;
		}
	}

	.environment-section {
		padding: 0 24rpx;
		margin-bottom: 30rpx;
		padding-bottom: 130rpx;
		.chart-container{
			padding: 30rpx 0;
		}
	}

	.environment-legend {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.legend-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		margin-right: 8rpx;
	}
</style>